<template>
  <div class="dialogBox dialogTable roomDialog">
    <el-dialog v-model="visible" :footer="false" title="房间详情" @close="handleClose">
      <div>
        <div class="roomDetails">
          <ul>
            <li>房间号：<label>{{ data.code }}</label></li>
            <li>房间类型：<label>{{ data.typeName }}</label></li>
            <li>总床位数：<label>{{ data.totalBeds }}</label></li>
            <li>入住床位数：<label>{{ data.occupiedBeds }}</label></li>
            <li>入住率：<label class="font-bt5">
              {{ data.occupancyRate === 0 ? 0 : (data.occupancyRate * 100).toFixed(2) }}%</label>
            </li>
          </ul>
        </div>

        <div :class="showPageTip ? 'heighta' : 'dialogHeight'" class="scrollTable">
          <el-table id="app" ref="tableRef" :data="bedData ? bedData : []" :height="400"
                    :scroll="{ type: 'virtual', rowHeight: 48, bufferSize: 10 }"
                    :v-loading="bedData > 0 ? loadingNode : ''"
                    row-key="id" @scroll="handleScroll($event)">
            <el-table-column align="center" label="床位号" prop="老人姓名" width="180"/>
            <el-table-column align="center" label="老人姓名" prop="deviceName" width="180"/>
            <el-table-column align="center" label="护理等级" prop="deviceName" width="180"/>
            <el-table-column align="center" label="入住期限" prop="locationType" width="180">
              <template #default="scope">
                {{ getDateInfo(scope.row.checkInConfigVo.checkInStartTime) }}~
                {{ getDateInfo(scope.row.checkInConfigVo.checkInEndTime) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="showPageTip" class="footInfo">已经到底了~</div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {getDateInfo} from '@/utils/date';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  bedData: {
    type: Array,
    default: () => [],
  },
  dialogVisible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['handleClose']);
const tableRef = ref(null);
const visible = ref(false);
const fixedTopAndBottomRows = ref(false);
const showPageTip = ref(false);
const asyncLoading = ref('loading-custom');
const customLoadingNode = () => {
  return `已经到底了`;
};
const loadingNode = computed(() =>
    asyncLoading.value === 'loading-custom'
        ? customLoadingNode
        : asyncLoading.value
);

watch(
    () => props.dialogVisible,
    (newVal) => {
      visible.value = newVal;
    }
);

const handleScroll = (e) => {
  const {scrollTop, clientHeight, scrollHeight} = e.e.target;
  if (scrollTop + clientHeight === scrollHeight) {
    asyncLoading.value = 'loading-custom';
    showPageTip.value = true;
    fixedTopAndBottomRows.value = true;
  } else {
    showPageTip.value = false;
    fixedTopAndBottomRows.value = false;
  }
};

// 关闭弹层
const handleClose = () => {
  visible.value = false;
  emit('handleClose');
};
</script>
